<template>
  <div class="setup-com-wrapper">
    <div>{{firstName}}</div>
    <div>{{lastName}}</div>
    <div>{{fullName}}</div>
    <div>
      <button @click="changename">改变</button>
      <button @click="changeFullname">改变</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
export default {
  name: 'SetupCom2',
  setup () {

    let firstName = ref('zhang');
    let lastName = ref('san');

    // computed 返回一个ref对象
    // let fullName = computed(() => `${firstName.value} ${lastName.value}`);
    let fullName = computed({
      get () {
        return `${firstName.value} ${lastName.value}`;
      },
      set (newVal) {
        let arr = newVal.split(' ');
        firstName.value = arr[0];
        lastName.value = arr[1];
      }
    });

    let changename = () => {
      firstName.value = 'li'
      console.log(fullName);
    }

    let changeFullname = () => {
      fullName.value = 'jack bule'
    }

    return {
      firstName,
      lastName,
      fullName,
      changename,
      changeFullname
    }
  }
};
</script>

<style scoped>
.setup-com-wrapper {
  background-color: #ffffff;
  width: 100%;
  min-height: 40px;
  margin-bottom: 20px;
}
</style>
